<template>
  <div>
    <el-row :gutter="20" class="mb8" style="align-items: center">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
        >添加接送地</el-button>
      </el-col>
      <el-col v-if="match?.isCar==1" :span="1.5">
        车辆可预定时间：{{ parseTime(match?.carStart,'{y}-{m}-{d}') }} ~ {{ parseTime(match?.carEnd,'{y}-{m}-{d}') }}
      </el-col>
      <el-col v-if="match?.isCar==1" :span="1.5">
        车辆退订截止时间：{{ parseTime(match?.carOff,'{y}-{m}-{d}') }}
      </el-col>
      <el-col v-if="match?.isCar==1" :span="1.5">
        车辆下单截止时间：{{ parseTime(match?.carLast,'{y}-{m}-{d}') }}
      </el-col>
      <el-col v-if="match?.isCar==1" :span="1.5">
        <el-button type="text" style="color: orange" @click="handleUpdateActive()">修改</el-button>
      </el-col><right-toolbar :search="false" @queryTable="getList" />
    </el-row>

    <el-table
      ref="tableRef" v-loading="loading" :data="receptionList" row-key="id" :expand-row-keys="[]"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand" width="30">
        <template #default="props">
          <el-row justify="center">
            <el-table v-loading="props.row.loading" :data="props.row.cars" style="width: 95%">
              <el-table-column label="车辆图片" align="center" prop="photos" width="100">
                <template #default="scope">
                  <el-image style="width: 40px;height: 40px" :src="scope.row.photos?.split(',')[0]" :preview-src-list="scope.row.photos?.split(',')" />
                </template>
              </el-table-column>
              <el-table-column label="车辆类型" min-width="150" align="center" prop="carType" />
              <el-table-column label="座位数" align="center" min-width="100" prop="carSeat" />
              <el-table-column label="车辆颜色" align="center" prop="carColor" min-width="100" />
              <el-table-column label="是否可接车" align="center" min-width="100" prop="checkIn">
                <template #default="scope">
                  <el-select v-if="scope.row.isEdit" v-model="scope.row.checkIn">
                    <el-option :value="1" label="是" />
                    <el-option :value="0" label="否" />
                  </el-select>
                  <span v-else>{{ scope.row.checkIn=='1'?'是':'否' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="接车价格" prop="inPrice" align="center" min-width="100">
                <template #default="scope">
                  <div v-if="scope.row.checkIn=='1'">
                    <el-input v-if="scope.row.isEdit" v-model="scope.row.inPrice" @keyup.enter="handleUpdateCar(props.row,scope.row)" />
                    <span v-else>{{ scope.row.inPrice }}</span>
                  </div>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="是否可送车" min-width="100" align="center" prop="checkOut">
                <template #default="scope">
                  <el-select v-if="scope.row.isEdit" v-model="scope.row.checkOut">
                    <el-option :value="1" label="是" />
                    <el-option :value="0" label="否" />
                  </el-select>
                  <span v-else>{{ scope.row.checkOut=='1'?'是':'否' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="送车价格" prop="outPrice" align="center" min-width="100">
                <template #default="scope">
                  <div v-if="scope.row.checkOut=='1'">
                    <el-input v-if="scope.row.isEdit" v-model="scope.row.outPrice" @keyup.enter="handleUpdateCar(props.row,scope.row)" />
                    <span v-else>{{ scope.row.outPrice }}</span>
                  </div>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column label="运营时间" min-width="200" align="center">
                <template #default="scope">
                  <el-time-picker
                    v-if="scope.row.isEdit"
                    v-model="scope.row.operTime"
                    style="width: 100%"
                    is-range
                    range-separator="~"
                    format="HH:mm"
                    value-format="HH:mm"
                    :editable="false"
                    :clearable="false"
                    @keyup.enter="handleUpdateCar(props.row,scope.row)"
                  />
                  <span v-else>{{ scope.row.operStart?`${scope.row.operStart} ~ ${scope.row.operEnd}`:'--' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button v-if="scope.row.isEdit" type="text" @click="handleUpdateCar(props.row,scope.row)">确定</el-button>
                  <el-button v-else type="text" @click="handleModifyRow(scope.row)">编辑</el-button>
                  <el-button v-if="scope.row.isEdit" type="text" @click="handleCancelRow(scope.row)">取消</el-button>
                  <el-button type="text" @click="handleDeleteCar(props.row,scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column label="接站地点" align="center" prop="checkIn" />
      <el-table-column label="送站地点" align="center" prop="checkOut" />
      <el-table-column label="操作" fixed="right" width="200" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="text" @click="handleAddCar(scope.row)">选择车辆类型</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <add-reception ref="addReceptionRef" @complete="getList" />
    <add-car ref="addCarRef" @complete="getCarList" />
  </div>
</template>

<script setup>

import { getCurrentInstance, ref } from 'vue'
import { useRoute } from 'vue-router'
import { delMatchReception, getActivity, getMatchReception } from '@/api/logex/activity'
import AddReception from './dialog/addReception'
import AddCar from './dialog/addCar'
import { delActivityCar, listActivityCar, putData } from '@/api/logex/activityCar'
import _ from 'lodash'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['modifyTime'])
const route = useRoute()

const match = ref(null)
const receptionList = ref([])
const loading = ref(true)

const matchId = route.params.matchId

function getList() {
  loading.value = true
  receptionList.value = []

  getMatchReception({
    activityId: matchId
  }).then(res => {
    loading.value = false
    receptionList.value = res.rows
  })
}

function getMatch() {
  getActivity(matchId).then(response => {
    match.value = response.data
  })
}

function handleUpdateActive() {
  emit('modifyTime')
}

function handleAdd() {
  proxy.$refs['addReceptionRef'].open({
    matchId: matchId
  })
}

function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除该接送地？').then(function() {
    loading.value = true
    return delMatchReception(row.id)
  }).then(() => {
    getMatchReception({
      activityId: matchId
    }).then(res => {
      receptionList.value = res.rows
    })

    proxy.$modal.msgSuccess('删除成功')
  }).finally(() => {
    loading.value = false
  })
}

function handleAddCar(row) {
  proxy.$refs['addCarRef'].open({
    rowId: row.id,
    matchId: row.activityId,
    vehicleId: row.vehicleId
  })
}

function handleExpandChange(row) {
  if (!row.cars) {
    row.loading = true
    listActivityCar({
      lavId: row.id
    }).then(res => {
      row.loading = false
      row.cars = res.rows
    })
  }
}

defineExpose({
  init: () => {
    getList()
    getMatch()
  },
  getMatch
})

//#region 车辆操作
function handleModifyRow(row) {
  const { checkIn, checkOut, inPrice, outPrice, operStart, operEnd, operTime } = row
  row.baseData = { checkIn, checkOut, inPrice, outPrice, operStart, operEnd, operTime }
  row.isEdit = true
}

function handleCancelRow(row) {
  row.checkIn = row.baseData.checkIn
  row.checkOut = row.baseData.checkOut
  row.inPrice = row.baseData.inPrice
  row.outPrice = row.baseData.outPrice
  row.operStart = row.baseData.operStart
  row.operEnd = row.baseData.operEnd
  row.operTime = row.baseData.operTime
  row.isEdit = false
}

function handleUpdateCar(reception, row) {
  if (row.checkIn == 1 && parseFloat(row.inPrice) != row.inPrice) {
    proxy.$modal.msgError('请输入正确的接车价格')
    return
  }
  if (row.checkOut == 1 && parseFloat(row.outPrice) != row.outPrice) {
    proxy.$modal.msgError('请输入正确的送车价格')
    return
  }
  if (!row.operTime || row.operTime.length == 0) {
    proxy.$modal.msgError('请选择正确的运营时间')
    return
  }

  row.operStart = row.operTime[0]
  row.operEnd = row.operTime[1]

  reception.loading = true
  putData({
    id: row.id,
    checkIn: row.checkIn,
    checkOut: row.checkOut,
    inPrice: row.inPrice,
    outPrice: row.outPrice,
    operStart: row.operStart,
    operEnd: row.operEnd
  }).then(res => {
    proxy.$modal.msgSuccess('更新成功')
    row.isEdit = false
  }).finally(() => {
    reception.loading = false
  })
}

function handleDeleteCar(reception, car) {
  proxy.$modal.confirm('是否确认删除车辆"' + car.carType + '"的数据项？').then(function() {
    reception.loading = true
    return delActivityCar(car.id)
  }).then(() => {
    listActivityCar({
      lavId: reception.id
    }).then(res => {
      reception.cars = res.rows
    })
    proxy.$modal.msgSuccess('删除成功')
  }).finally(() => {
    reception.loading = false
  })
}

function getCarList(rowId) {
  const reception = _.find(receptionList.value, (h) => {
    return h.id === rowId
  })

  reception.loading = true
  listActivityCar({
    lavId: rowId
  }).then(res => {
    reception.loading = false
    reception.cars = res.rows

    proxy.$refs['tableRef'].toggleRowExpansion(reception, true)
  })
}

//#endregion

</script>

<style scoped>

</style>
